<template>
  <div class="line-sell f-sb-s">
    <router-link to="/" class="f-c-c">
      <el-image
        style="width: 80px; height: 80px"
        :src="require('@/public/img/defaultGoods.png')"
        fit="cover"
      ></el-image>
    </router-link>
    <div id="info">
      <div class="title"><router-link to="/">这是标题这是标题这是标题</router-link></div>
      <div class="sell f-sb-c">
        <router-link to="/">共<b>1</b>评价</router-link>
        <span>好评率<b>100%</b></span>
        <span>月销量<b>100</b></span>
        <span>历史销量<b>1000</b></span>
      </div>
    </div>
    <div id="price" class="f-c-c">￥1234.00</div>
    <div id="tags" class="f-sa-c-c">
      <el-tag type="success" size="mini" effect="dark">new</el-tag>
      <el-tag type="danger" size="mini" effect="dark">hot</el-tag>
    </div>
    <div id="btns" class="f-sa-c-c">
      <el-button type="primary" size="mini">立即购买</el-button>
      <el-button type="primary" size="mini">加入购物车</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "lineSell",
  components: {},
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.line-sell {
  height: 80px;
  padding: 5px 0;
  border-bottom: 1px solid $border-color-extra-light;
}
#info,#price,#tags{
    margin: 0 22px;
}
#info {
    flex-grow: 1;
    .title{
        @include text-ellipsis;
        line-height: 26px;
        height: 52px;
        font-weight: 500;
        font-size: 18px;
    }
    .sell{
        color: $color-text-secondary;
        font-size: 14px;
        b{
            color: $theme-color;
        }
    }
}
#price{
    color: $rmb-color;
    font-size: 18px;
    font-weight: bold;

}
#btns {
  .el-button {
    margin: 0;
  }
}
</style>